<template>
  <div class="tabs">
      <el-tag v-for="(item, index) in tags" :key="item.path" :closable="item.name !== '首页'"
        :effect="$route.name === item.name ? 'dark' : 'plain'" @click="changeMenu(item)" @close="handleClose(item, index)" >
        {{ item.name }}
      </el-tag>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
export default {
  name: 'KodaiCommonTag',
  mounted() {

  },

  methods: {
    // 导入
    ...mapMutations(['closeTag']),
    // 点击跳转  
    changeMenu(item) {
      console.log(this.tags);
      console.log(item);
      if (this.$route.name != item.name) {
              this.$router.push({ name: item.name })
      }
    },
    // 点击删除tag
    handleClose(item, index) {
      this.closeTag(item)
      const length = this.tags.length
            
      // 删除后的跳转逻辑
      if (item.name !== this.$route.name) {
        return
      }
      // 表示删除最后一项
      if (index == length) {
        console.log(index,length);
        this.$router.push({ name: this.tags[index - 1].name })
      } else {
        console.log(index, length);
        this.$router.push({ name: this.tags[index].name })
      }
    }
  }, computed: {
    ...mapState({
      tags: state => state.tab.tabList
    })
  }
};
</script>

<style lang="scss" scoped>
.tabs{
  background: #ffff;

}
.el-tag--dark{
  margin-left: 20px ;
}
.el-tag--plain {
    margin-left: 1rem;
    margin-top: 0.2rem;
}
 .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
</style>